<template>
	<view style="width: 100%; height: 100%;">
		<uni-nav-bar dark :fixed="true" shadow bgimage="linear-gradient(to right, #4facfe 0%, #00f2fe 100%)" status-bar
			left-icon="left" left-text="返回" title="尚图" @clickLeft="back" />
		<view class="uni-nav-bar-empty-v"></view>
		<view class="searchv">
			<view style="width: 80%;height: 90rpx;">
				<uni-search-bar @confirm="search" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
					@cancel="cancel" @clear="clear" cancelButton="none" textColor="#494949">
				</uni-search-bar>
			</view>
			<view style="margin-top: 15rpx;">
				<text class="btn-grad" @click="search">搜索</text>
			</view>			
		</view>

		<view class="hot-words-container" v-if="isShowHotWords == true">
			<view style="color:#424242;font-size: 30rpx;font-weight: 600;">热搜</view>
			<view class="hot-wordsv"><text>鲜花饼</text><text>月饼礼盒</text><text>板栗</text></view>
		</view>

		<view v-show="isShowProducList  == true" class="product-container">
			<view v-for="(item, index) in merchantList" :key="index" :index="index">
				<view class="ucenter-line" style="height: 5rpx;"></view>
				<view class="productv">
					<view class="merchant-title" style="padding-inline: 20rpx;"
						v-on:click="toMerchant(item[0].merchantId)">
						<view
							style="width: 90%;display: flex;justify-content:left;align-items:center;flex-wrap: wrap;">
							<image :src="item[0].merchantIcon"
								style="width: 50rpx;height: 50rpx;border-radius: 50%;"></image>
							<text style="margin-left: 20rpx;color: #e67e22;">{{item[0].merchantName}}</text>
						</view>
						<image src="https://shangtu.obs.cn-north-4.myhuaweicloud.com/img/%E6%9B%B4%E5%A4%9A.png"
							style="width: 50rpx;height: 50rpx;border-radius: 50%;margin-right: 0rpx;"></image>
					</view>
					<scroll-view scroll-x="true"
						style="padding: 10rpx; white-space: nowrap;width: 100%;overflow-x: hidden;background-color: #edfafe ;">
						<view
							style="width: 172rpx;margin-left: 8rpx; display: inline-block;border-radius: 10rpx;background-color: white; "
							v-for="(product, index2) in item" :key="index2" :index="index2" @click="chooseProduct(product.id)">
							<!-- <text class="grace-gtbg-blue">标签</text> -->
							<image :src="product.img" style="width: 172rpx; height: 172rpx;border-radius: 10rpx;"></image>
							<view>
								<!-- <text style="width: 50%;font-size: 24rpx;font-weight: 400;color: #666666;">&nbsp;南华野生菌</text> -->
								<text style="color: #e67e22;font-weight: 400;font-size: 24rpx;">&nbsp;¥{{product.price}}</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<view style="margin-bottom: 10rpx;padding-left: 20rpx;" @click="enterMap">
					<uni-icons type="location" color="#5cbcf1" size="15"></uni-icons><text
						style="color: #5cbcf1; font-size: 24rpx;">兆顺第一城(5.3km)</text>
				</view>
			</view>
			<view class="ucenter-line" style="height: 5rpx;"></view>
		</view>
	</view>
</template>

<script>
	import tabBar from '@/components/tabBar/tabBar.vue';
	import productEsApi from "@/api/productEs.js"
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				isShowProducList:false,
				isShowHotWords: true,
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../../static/location.png'
				}],
				startX: 0,
				endX: 0,
				currentView: 0,
				searchValue: '球',
				merchantList:[]
			}
		},
		methods: {
			// 点击切换页面事件
			toTab(data) {
				console.log(data);
				uni.switchTab({
					url: data.pageUrl
				});
			},
			chooseMenu(item) {
				console.log(item)
				for (let i = 0; i < this.menulist.length; i++) {
					if (this.menulist[i].id === item.id) {
						this.menulist[i].isActive = true;
					} else {
						this.menulist[i].isActive = false;
					}
				}
			},
			// 检测向左滑动
			handleTouchStart(e) {
				console.log('Touch start event triggered');
				this.startX = e.touches[0].pageX;
			},
			handleTouchEnd(e) {
				console.log('Touch start event triggered');
				this.endX = e.changedTouches[0].pageX;
				// 判断滑动方向
				if (this.startX > this.endX) {
					this.currentView = 1
				}
			},
			backProductView() {
				this.currentView = 0
			},
			chooseProduct(id) {
				uni.navigateTo({
					url: "/pages/productDetail/productDetail?productId=" + id
				})
			},
			toMerchant(id) {
				uni.navigateTo({
					url: "/pages/merchant/merchant?merchantId=" + id
				})
			},
			tosearch() {
				console.log("sss")
			},
			search(e) {
				console.log(this.isShowHotWords)
				this.isShowHotWords = false
				console.log(this.isShowHotWords)
				let latitude = getApp().globalData.location?.latitude
				let longitude = getApp().globalData.location?.longitude
				productEsApi.query(this.searchValue, latitude, longitude, 10, 0, 30, false).then(res => {
					console.log(res)
					this.isShowProducList = true
					this.merchantList = res
				})
			},
			clear() {
				console.log("11")
				this.isShowHotWords = true;
				this.isShowProducList = false;
			},
			back() {
				uni.switchTab({
					url: "../index/index"
				});
			},

		},
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}

	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}

	.searchv {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		background-color: white;

		.btn-grad {
			padding-inline: 20rpx;
			line-height: 60rpx;
			border-radius: 30rpx;
			background-image: linear-gradient(to right, #36D1DC 0%, #5B86E5 51%, #36D1DC 100%);
			margin: 10px;
			text-align: center;
			text-transform: uppercase;
			transition: 0.5s;
			background-size: 200% auto;
			color: white;
			box-shadow: 0 0 20px #eee;
			border-radius: 10px;
			display: block;
		}

		.btn-grad:hover {
			background-position: right center;
			/* change the direction of the change here */
			color: #fff;
			text-decoration: none;
		}

	}

	.hot-words-container {
		padding-inline: 20rpx;

		.hot-wordsv {
			padding: 25rpx;

			text {
				font-size: 28rpx;
				background-color: #eeeeee;
				color: #202020;
				padding: 5rpx 20rpx 5rpx 20rpx;
				margin-right: 25rpx;
				border-radius: 25rpx;
			}
		}
	}

	.product-container {
		padding-top: 20rpx;
		padding-bottom: 10rpx;
		background-color: white;

		.productv {
			padding-top: 20rpx;
			padding-bottom: 10rpx;
			background-color: white;

			.merchant-title {
				background-color: white;
				display: flex;
				justify-content: left;
				align-items: center;
				flex-wrap: wrap;
				margin-bottom: 10rpx;
			}

			.contentv {
				height: 150rpx;
				width: calc(100% - 150rpx);
				display: flex;
				justify-content: left;
				align-items: center;
				flex-wrap: wrap;

				view {
					width: 100%;
					height: auto;
					padding-left: 20rpx;
				}

				.title {
					color: #353535;
				}

				.place {
					color: #575757;
					font-size: 28rpx;
				}

			}
		}
	}

	.map-container {
		height: calc(100vh - 44px - 200rpx);

		.back-product-view {
			position: fixed;
			left: 0;
			bottom: 50vh;
			z-index: 999;
			width: 35rpx;
			height: 250rpx;
			background-color: black;
			opacity: 0.6;
			color: #FFFFFF;
			border: none;
			border-top-right-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0rpx -10rpx 20rpx #e2e2e2;
		}
	}
</style>